<template>
  <v-chart  class="chart" :option="option" autoresize />
</template>

<script setup>
import { color, use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart ,PieChart} from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ref, watch, defineProps } from "vue";

use([
  CanvasRenderer,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);
import  {ringSerie,lineSerie} from "./ringChartsOptions"; 
const props = defineProps({
  type: {
    type: String,
    default: "bar",
  },
  xAxisData: {
    type: Array,
    default: () => [],
  },
  seriesData: {
    type: Array,
    default: () => [],
  },
});
const option = ref({
  title: {
    show: false,
  },
  color: "#fff5a7",
  tooltip: {
    trigger: "axis",
    formatter: (params) => {
      const data = params[0];
      return `${data.marker}${data.axisValueLabel}: ${data.value}`;
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: props.xAxisData,
    axisLabel: {
      interval: 0,
      rotate: 30, // 旋转角度
      formatter: function (value) {
        // 旋转时也限制最多4个字
        return value.length > 4 ? value.substring(0, 4) + "..." : value;
      },
      width: 60, // 固定宽度
    },
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: props.seriesData,
    },
  ],
});
if(props.type === "bar"){
  option.value.series[0] = {...option.value.series[0],...lineSerie};
}else if(props.type === "ring"){
  option.value.series[0] = {...option.value.series[0],...ringSerie};
}
watch(
  () => props.xAxisData,
  (val) => {
    option.value.xAxis.data = val;
  },
  { deep: true }
);

watch(
  () => props.seriesData,
  (val) => {
    option.value.series[0].data = val;
    console.log('option',option)
  },
  { deep: true }
);
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>
